import React, { Component } from 'react';
import http from '../../plugins/axios.js';

export default class login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            username: '',
            password: '',
        };
    }

    usernameOnChange(username) {
        this.setState({ username });
    }

    passwordOnChange(password) {
        this.setState({ password });
    }

    async login() {
        console.log('this.state', this.state);
        const { username, password } = this.state;
        // 登录获取 token
        let res = await http.post('/login', { username, password });
        console.log('res', res);
        // 判断是否的登录成功
        if (res.code !== 200) {
            alert(res.message);
            return;
        }
        // 登录成功
        // 1、存储登录成功后返回的 token 到 sessionStorage 中，以便在发起后续请求时，可以携带上该 token，来像服务器证明我是谁
        window.sessionStorage.setItem('token', res.data.token);
        // 2、保存用户信息到 sessionStorage 中，以便其他组件展示使用
        window.sessionStorage.setItem('user', JSON.stringify(res.data.user));
        // 3、token 存储后，再跳转到博客列表页面
        this.props.history.push('/blog/list');
    }

    render() {
        return (
            <div className="login">
                <div>
                    <label htmlFor="username">用户名：</label>
                    <input
                        type="text"
                        id="username"
                        value={this.state.username}
                        onChange={(e) => this.usernameOnChange(e.target.value)}
                    />
                </div>

                <div>
                    <label htmlFor="password">密码：</label>
                    <input
                        type="password"
                        id="password"
                        value={this.state.password}
                        onChange={(e) => this.passwordOnChange(e.target.value)}
                    />
                </div>

                <div>
                    <button onClick={() => this.login()}>登录</button>
                </div>
            </div>
        );
    }
}
